<template>
	<view class="food-detail-content">
		<Swiper style="width: 100%;height: 400rpx;" :styleObj="{width:'100%',height:'400rpx',borderRadius:0}"
			:list="banner"></Swiper>
		<CustomNav :custom="custom" :isBack="true" :backColor="'#fff'" :title="detail.name" :topBgColor="topBgColor"
			:color="titleColor"></CustomNav>

		<view class="info-block name-block">
			<view class="name">{{detail.name}}</view>
			<view class="label-block">
				<view v-for="(item,index) in detail.type" class="label-item">{{item}}</view>
			</view>
		</view>
		<view class="info-block name-block">
			<view class="information-block">
				<view class="information-item">
					<view class="label-value">{{detail.build_type}}</view>
					<view class="label-title">房型</view>
				</view>
				<view class="information-item">
					<view class="label-value">{{detail.build_area}}</view>
					<view class="label-title">面积</view>
				</view>
				<view class="information-item">
					<view class="label-value">{{detail.build_floor}}</view>
					<view class="label-title">楼层</view>
				</view>
				<view class="information-item">
					<view class="label-value">{{detail.build_direct}}</view>
					<view class="label-title">朝向</view>
				</view>
			</view>
		</view>
		<view class="info-block phone-block">
			<view @click="callPhone(detail.contact_phone)" class="item">
				<view class="iconfont icon-dianhua"></view>
				<view style="width:calc(100% - 130rpx);" class="value">{{detail.contact_phone}}</view>

			</view>
			<view @click="openMap" class="item">
				<view class="iconfont icon-dingwei"></view>
				<view style="width:calc(100% - 130rpx);" class="value">{{detail.addr_name}}</view>

			</view>
		</view>
		<view class="info-block introduce-block">
			<view class="block-title">房屋介绍</view>
			<view class="block-content">
				<mp-html :content="detail.content"></mp-html>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getDetail
	} from '@/api/entrepreneurship.js'
	export default {
		data() {
			return {
				custom: null,
				detail: {
					id: 1,
					name: '中深沟二组有闲置民房出租',
					introduce: '中所沟二组有闲置民房出租，精装修，家具齐全，西北向，可以随时看房，业主原打算自住，装修用材讲究，已空置半年，不用担心甲醛问题，业主容易沟通...',
					label: ['可作仓房', '可作库房'],
					phone: '18919461998',
					positionText: '肃州区果园镇中所沟二组',
					information: ['1室1厅0卫', '30.00m²', '共一层', '朝北'],
					title: ['房型', '面积', '楼层', '朝向']
				},
				banner: [],
				titleColor: 'rgba(0,0,0,0)',
				topBgColor: 'rgba(0,0,0,0)',
			}
		},
		methods: {
			callPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			openMap() {
				const longitude = this.detail.longitude * 1;
				const latitude = this.detail.latitude * 1;
				const name = this.detail.addr_name;
				const address = this.detail.addr_text;
				uni.openLocation({
					longitude,
					latitude,
					name,
					address,
					fail: (res) => {
						this.utils.showToast('操作失败');
					}
				})
			},
			getDetailData(id) {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getDetail({
					id
				}).then((res) => {
					uni.hideLoading();
					if (res.status == 1) {
						this.detail = res.data;
						this.banner = res.data.files;
					} else {
						this.utils.showToast(res.message, () => {
							uni.navigateBack()
						})
					}
				}).catch((res) => {
					uni.hideLoading()
					this.utils.showToast('加载失败，请重试', () => {
						uni.navigateBack()
					})
				})
			}
		},
		onLoad(e) {
			this.custom = this.utils.getCustomNavData();
			this.getDetailData(e.id)
		},
		onPageScroll(e) {
			if (e.scrollTop >= 90) {
				this.topBgColor = '#32CCCA';
				this.titleColor = '#fff';
			} else {
				this.topBgColor = 'rgba(0,0,0,0)';
				this.titleColor = 'rgba(0,0,0,0)';
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100vh;
		background: #F6F6F6;
	}

	.food-detail-content {
		width: 100%;

		.info-block {
			background: #fff;
			margin-bottom: 10rpx;
			position: relative;
			padding: 30rpx;
		}

		.info-block.name-block {
			margin-top: -40rpx;
			border-radius: 40rpx 40rpx 0 0;
			display: flex;
			flex-direction: column;

			.describe {
				margin-top: 20rpx;
				font-size: 26rpx;
				color: #999;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.label-block {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				margin-top: 20rpx;
				.label-item {
					background: #DDFDFE;
					color: $uni-color-primary;
					font-size: 24rpx;
					padding: 5rpx 10rpx;
					margin-bottom: 16rpx;
					margin-right: 16rpx;
					border-radius: 12rpx;
				}
			}
			.information-block{
				width: 100%;
				margin-top: 20rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				.information-item{
					flex-grow: 1;
					display: flex;
					flex-direction: column;
					align-items: center;
					.label-title {
						font-size: 24rpx;
						color: #9ca2a2;
						margin: 16rpx 0;
					}
				}
			}

			.name {
				font-size: 48rpx;
				font-weight: bold;
				margin-top: 20rpx;
			}

			.score-block {
				display: flex;
				margin-top: 20rpx;
				align-items: center;

				.iconfont {
					color: #FD8249;
					font-size: 28rpx;
					margin-right: 20rpx;
				}

				.score {
					font-size: 30rpx;
					font-weight: bold;
				}
			}
		}

		.info-block.phone-block {
			display: flex;
			flex-direction: column;
			padding: 20rpx 30rpx;

			.item {
				width: 100%;
				border-bottom: 1px solid #efefef;
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 20rpx 0;

				.iconfont {
					width: 60rpx;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 34rpx;
					font-weight: bold;
					margin-right: 10rpx;
				}

				.value {
					width: calc(100% - 130rpx);
					display: flex;
					align-items: center;
					font-size: 30rpx;
				}
			}

			.item:last-child {
				border: none;
			}
		}

		.info-block.introduce-block {
			display: flex;
			flex-direction: column;

			.block-title {
				font-size: 34rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
			}

			.block-content {
				font-size: 30rpx;
				line-height: 1.8;
				text-align: justify;
			}
		}
	}
</style>
